<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #app {
        width: 500px;
        height: 1000px;
        margin: 50px auto;
    }

    .box {
        background: deepskyblue;
    }

    .title {
        width: 95%;
        height: 50px;
        font-size: 30px;
        color: white;
        line-height: 50px;
        background: deepskyblue;
        margin-left: 10px;
    }

    .seacherbox {
        width: 100%;
        height: 50px;
        background: deepskyblue;
        text-align: center;
    }

    .seacherbox input {
        border: none;
        outline: none;
        height: 30px;
        width: 95%;
        border-radius: 20px;
        text-align: center;

    }

    .pic {
        width: 95%;
        height: 100px;
        background: pink;
        margin: 10px auto;
    }

    .like {
        width: 95%;
        height: 30px;
        font-size: 25px;
        font-weight: 700;
        margin: 10px auto;
    }

    .list {
        width: 95%;
        height: 30px;
        background: deepskyblue;
        margin: 5px auto;
        text-align: center;
    }

    .list span {
        display: inline-block;
        width: 25%;
        height: 30px;
        font-size: 17px;
        line-height: 30px;
        cursor: pointer;
    }

    .list .color {
        color: white;
        background: red;
    }

    .goods {
        width: 95%;
        height: 100px;
        background: red;
        margin: 5px auto;

    }

    .goods .goods-list {
        display: flex;
        justify-content: space-between;
        background: white;
        text-align: center;
    }

    .goods .goods-list .left {
        width: 20%;
        height: 100px;
    }

    .goods .goods-list .right {
        width: 80%;
        height: 100px;
        margin-top: 20px;
    }

    .goods .goods-list .left img {
        width: auto;
        height: 100px;
    }

    .tabbar {
        width: 95%;
        height: 40px;
        display: flex;

        text-align: center;
        line-height: 40px;
        position: fixed;
        bottom: 100px;

        cursor: pointer;
    }

    .tabbar .btn {
        margin-right: 200px;
    }

    .tabbar img {
        height: 30px;
    }

    .tabbar div.active {
        color: deepskyblue;
        cursor: pointer;
        background: deepskyblue;
    }
</style>

<body>
    <!-- 饿了么 -->
    <div id="app">
        <div class="box">
            <div class="title">{{name}}</div>
            <div class="seacherbox">
                <input type="text" placeholder="输入商家、商品名称" @focus="opt()">
            </div>
        </div>
        <div class="pic"></div>
        <div class="like">{{like}}</div>
        <div class="list">
            <span v-for="(item,index) in arr" @click="btn(index)" :class="{color:ifIndex==index}">{{item}}</span>
        </div>
        <!-- 商品列表 -->
        <div class="goods">
            <div class="goods-list" v-for="(item,index) in list">
                <div class="left">
                    <img :src="item.images" alt="">
                </div>
                <div class="right">
                    <h2>{{item.name}}</h2>
                    <span>月售{{item.num}}</span><br>
                    <span>起送￥{{item.price}}</span>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="tabbar">
            <div :class="{active: currentIndex == index }" @click="handleClick(index)" class="btn"
                v-for="(item,index) in footer">
                <img :src="item.pic" alt="">
                <div class="name">{{item.name}}</div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="vue.js"></script>
<script src="demo3.js"></script>